<template>
	<view class="page">
		<view class="business_swiper">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<view :class="item.colorClass" class="swiper-item">
								<image class="image" :src="item.url" mode="scaleToFill" style="width: 100%;" />
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="tearch_top">
			<view class="tearch_top_right">
				<view class="teacher_title">
					南山敬老院
					<image src="@/static/img/jing.png" mode=""></image>
					<text class="signName">金牌商家</text>
					<text class="authenName">营业资格认证</text>
				</view>
				<view class="tearch_detailsg_pingfen">
					<view class="rate">
						好评：<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
					</view>
					<view class="comment">
						累计服务次数：100
					</view>
				</view>
				<view class="text">距离我863m</view>
				<view class="text">联系地址：<uni-icons class="position_icon" type="location-filled" size="14" color="#b3b3b3"></uni-icons>
					羊山新区恒大名都1号楼</view>
			</view>
		</view>
		<view class="line25"></view>
		<view class="teacher_box">
			<view class="bestBusiness-title">
				<text class="title">热售服务</text>
				<text class="line"></text>
			</view>
			<view class="hotService">
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn">
						预约服务
					</view>
				</view>
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn">
						预约服务
					</view>
				</view>
				<view class="hotSerItem">
					<view class="thunmb">
						<image src="../../static/menus/10.png"></image>
					</view>
					<view class="text">
						<view class="title">理发</view>
						<view class="p">价格：68元/人</view>
						<view class="p">销量：8</view>
						<view class="p">离我距离：1.2km</view>
					</view>
					<view class="orderBtn" @click="orderServer">
						预约服务
					</view>
				</view>
			</view>
		</view>
		<view class="line25"></view>
		<view class="news_box">
			<view class="bestBusiness-title">
				<text class="title">机构简介</text>
				<text class="line"></text>
			</view>
			<view class="news_content_box">
				<text class="news_content" space="emsp">
					&nbsp;&nbsp;&nbsp;&nbsp;盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。
					盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐
				</text>
			</view>
		</view>
		<view class="line25"></view>
		<view class="tearch_evaluate">
			<view class="tearch_evaluate_title">
				<view class="bestBusiness-title">
					<text class="title">用户评价</text>
					<text class="line"></text>
				</view>
				<navigator url="/pages/business/userComment_list" class="whole" hover-class="none"> 更多
					<uni-icons class="whole_icon" type="forward" style="margin-left: 2rpx" size="14"></uni-icons>
				</navigator>
			</view>
			<view class="tearch_evaluate_box">
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_left">
							<image src="../../static/img/touxiang.jpg" mode=""></image>
						</view>
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								A 专业版孙红雷 <text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_left">
							<image src="../../static/img/touxiang.jpg" mode=""></image>
						</view>
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								A 专业版孙红雷 <text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="tearch_evaluate_item">
					<view class="tearch_evaluate_top">
						<view class="tearch_evaluate_left">
							<image src="../../static/img/touxiang.jpg" mode=""></image>
						</view>
						<view class="tearch_evaluate_right">
							<view class="tearch_evaluate_right_title">
								A 专业版孙红雷 <text class="date">2019-10-15</text>
							</view>
							<view class="rate">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
							</view>
						</view>
					</view>
					<view class="tearch_evaluate_bot">
						<view class="tearch_evaluate_right_content">
							盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子······
						</view>
						<view class="tearch_evaluate_thumb">
							<scroll-view scroll-x="true" class="scroll">
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
								<view class="box">
									<image src="../../static/img/1.jpg"></image>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="callPhone" @click="callPhone">
			<image src="../../static/img/callphone.png"></image> 拨打电话
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import uniSwiperDot from '@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniRate,
			uniSwiperDot
		},
		data() {
			return {
				info: [{
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					content: '最新限时活动'
				}, {
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					content: '市里领导来检查'
				}, {
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					content: '工厂优惠'
				}],
				current: 0,
				mode: 'nav',
			}

		},
		onLoad(e) {
			console.log(e)
		},
		methods: {
			// 这里是轮播图的事件
			change(e) {
				this.current = e.detail.current;
			},
			// 跳转到详情页
			inforeservation() {
				uni.navigateTo({
					url: "/pages/business/userReservation"
				})
			},
			callPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '110',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-bottom: 117rpx;
		background: #fff;

		.line25 {
			width: 100%;
			height: 25rpx;
			background: rgba(244, 244, 244, 1);
		}

		.business_swiper {
			swiper {
				height: 396rpx;
			}
		}

		.tearch_top {
			display: flex;
			background-color: #fff;
			padding: 33rpx;

			.tearch_top_right {
				width: 100%;

				.teacher_title {
					font-size: 32rpx;
					margin-bottom: 10rpx;
					vertical-align: middle;

					.signName {
						display: inline-block;
						margin-right: 22rpx;
						font-size: 26rpx;
						color: #F5CD4D;
					}

					.authenName {
						display: inline-block;
						padding: 0 8rpx;
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(54, 138, 255, 1);
						font-size: 24rpx;
						color: rgba(54, 138, 255, 1);
					}

					image {
						position: relative;
						top: -1px;
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
						vertical-align: middle;
					}
				}

				.rate {
					display: inline-block;
				}

				.tearch_detailsg_pingfen {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 17rpx;

					.rate {
						font-size: 26rpx;
						color: #FC503E;
						.pingfen {
							display: inline-block;
						}
					}

					.comment {
						font-size: 24rpx;
						color: #B3B3B3;
					}
				}

				.text {
					margin-bottom: 17rpx;
					line-height: 100%;
					font-size: 26rpx;
					color: #B3B3B3;
				}

				.text:last-child {
					margin-bottom: 0rpx;
				}
			}
		}

		.bestBusiness-title {
			position: relative;
			padding: 33rpx;

			.title {
				position: relative;
				z-index: 1;
				display: inline-block;
				line-height: 63rpx;
				color: #565656;
				font-size: 42rpx;
			}

			.line {
				position: absolute;
				top: 78rpx;
				left: 33rpx;
				display: block;
				width: 97rpx;
				height: 17rpx;
				margin: 0px auto;
				background: rgba(215, 232, 255, 1);
				border-radius: 13rpx;
				z-index: 0;
			}
		}

		.teacher_box {
			.hotService {
				padding: 0 34rpx;

				.hotSerItem {
					position: relative;
					display: flex;
					padding-bottom: 14rpx;
					margin-bottom: 17rpx;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);

					.thunmb {
						flex: 0 0 157rpx;
						width: 157rpx;
						height: 157rpx;
						padding: 17rpx;
						margin-right: 38rpx;
						border-radius: 8rpx;
						border: 1px solid rgba(0, 0, 0, 0.1);
						text-align: center;
						box-sizing: border-box;

						image {
							width: 124rpx;
							height: 124rpx;
						}
					}

					.title {
						margin-bottom: 17rpx;
						line-height: 100%;
						font-size: 32rpx;
						color: rgba(86, 86, 86, 1)
					}

					.p {
						margin-bottom: 17rpx;
						line-height: 100%;
						font-size: 26rpx;
						color: rgba(86, 86, 86, 1);
					}

					.p:last-child {
						margin-bottom: 0;
					}

					.orderBtn {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 167rpx;
						height: 58rpx;
						line-height: 58rpx;
						background: rgba(54, 138, 255, 1);
						border-radius: 29rpx;
						border: 1px solid rgba(151, 151, 151, 1);
						font-size: 26rpx;
						color: #fff;
						text-align: center;
					}
				}

				.hotSerItem:last-child {
					border-bottom: none;
				}
			}
		}

		.news_box {
			.news_content_box {
				padding: 0 33rpx;

				.news_content_title {
					margin-bottom: 15rpx;
					font-size: 28rpx;
				}

				.news_content {
					font-size: 26rpx;
					color: #565656;
					text-indent: 2rpx;
				}
			}
		}

		.tearch_evaluate {
			.tearch_evaluate_title {
				position: relative;
				width: 100%;

				.user {
					padding-left: 46rpx;
				}

				.whole {
					position: absolute;
					right: 33rpx;
					top: 50%;
					font-size: 26rpx;
					color: #565656;
					transform: translateY(-50%);

					.whole_icon {
						vertical-align: bottom;
					}
				}
			}

			.tearch_evaluate_box {
				padding: 0 33rpx;

				.tearch_evaluate_item {
					margin-bottom: 25rpx;
					padding-bottom: 25rpx;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);

					.tearch_evaluate_top {
						display: flex;
						margin-bottom: 10rpx;

						.tearch_evaluate_left {
							margin-right: 30rpx;
							flex: 0 0 100rpx;
							width: 100rpx;
							height: 100rpx;

							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
							}
						}

						.tearch_evaluate_right {
							flex: 1;

							.tearch_evaluate_right_title {
								font-size: 32rpx;
								color: #565656;

								.date {
									font-size: 24rpx;
									float: right;
									color: #ddd;
								}
							}

							.rate {
								display: inline-block;
								font-size: 22rpx;
								margin-bottom: 6rpx;

								.pingfen {
									display: inline-block;
								}
							}
						}
					}

					.tearch_evaluate_bot {
						.tearch_evaluate_right_content {
							padding-bottom: 15rpx;
							font-size: 28rpx;
							color: #B3B3B3;
						}

						.tearch_evaluate_thumb {
							.scroll {
								width: 100%;
								overflow: hidden;
								white-space: nowrap;
								box-sizing: border-box;
							}

							.box {
								display: inline-block;
								width: 133rpx;
								height: 127rpx;
								margin-right: 25rpx;
								overflow: hidden;

								image {
									width: 133rpx;
									min-height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}

	.callPhone {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 117rpx;
		line-height: 117rpx;
		background-color: #368AFF;
		margin: 0 auto;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		border-radius: 0;
		vertical-align: middle;

		image {
			position: relative;
			top: -2px;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			margin-right: 17rpx;
		}
	}
</style>
